<template>
  <div style="height:100%">
    <el-container>
      <el-aside width="200px">
        <div class="myselelf-box">
          <el-avatar size="large" :src="'http://101.43.223.224:8765/image/getImageById?id='+userInfo.imageId" style="margin-top: 20%;width: 70px;height:70px; cursor:pointer;"></el-avatar>
          <!-- <el-avatar size="large" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="margin-top: 20%;width: 70px;height:70px"></el-avatar> -->
          <!-- <p>{{userInfo.userName}}</p> -->
          <p>{{userInfo.userName}}</p>
          <p style="font-size:12px;">参与的</p>
        </div>
        <div class="menu-box">
          <el-menu
            router
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#fafaf2"
            text-color="gray"
            active-text-color="#D7000F"
            @select="selectIndex">
            <el-menu-item index="/biddingView" >
              <span slot="title"><b>竞价（{{bidTotal}}）</b></span>
            </el-menu-item>
            <el-menu-item index="/orderForGoods">
              <span slot="title"><b>订单（{{orderTotal}}）</b></span>
            </el-menu-item>
            <el-menu-item index="/runningWater">
              <span slot="title"><b>流水</b></span>
            </el-menu-item>
            <el-menu-item index="/followWithInterest">
              <span slot="title"><b>关注</b></span>
            </el-menu-item>
            <el-menu-item index="/MeansView">
              <span slot="title"><b>资料</b></span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-header>{{menuTitle}}</el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data () {
    return {
      clientAddress: {}, // 客户订单
      userInfo: {}, // 用户信息
      menuTitle: '我参与的竞价',
      bidTotal: 0, // 竞价条数
      orderTotal: 0, // 订单条数
      token: window.sessionStorage.getItem('token') // 取token
    }
  },
  async mounted () {
    // 获取当前登录用户的信息
    this.getUserInfo()
  },
  methods: {
    // 获取当前登录用户的信息
    getUserInfo () {
      this.$axios.post('/clientuser/getLoginUser', this.token).then(res => {
        if (res.data.flag) {
          this.userInfo = res.data.obj
          console.log(this.userInfo)
        } else {
          this.myMessage('当前用户暂未参与交易', 'error')
        }
      })
      console.log('已获取登录用户信息')
      this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      this.userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
      // 查询我的竞价数量
      this.$axios.get('myBid/selectMyBidById', { params: { userId: this.userInfo.id, pageSize: 5, pageNum: 1 } }).then((res) => {
        if (res.data.code === '200') {
          this.bidTotal = res.data.obj.total
        }
      })
      // 查询我的订单数量
      this.$axios.get('myBid/selectMyOrderById', { params: { bidder: this.userInfo.id, pageSize: 5, pageNum: 1 } }).then((res) => {
        if (res.data.code === '200') {
          this.orderTotal = res.data.obj.total
        }
      })
    },
    // 获取
    async selectIndex (index) {
      console.log(index)
      switch (index) {
        case '/biddingView':
          this.menuTitle = '我参与的竞价'
          break
        case '/orderForGoods':
          this.menuTitle = '我的订单'
          break
        case '/runningWater':
          this.menuTitle = '我的流水'
          break
        case '/followWithInterest':
          this.menuTitle = '我的关注'
          break
        case '/MeansView':
          this.menuTitle = '我的资料'
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .el-header{
    background-color: #fafaf2;
    line-height:60px;
    color: #333;
    font-size:18px;
    font-weight: bold;
    border-radius: 10px;
    margin-bottom: 20px;
  }

  .el-aside {
    height:100%;
    margin-right: 20px;
    color: #333;
    text-align: center;
  }

  .el-main {
    background-color: #fafaf2;
    color: #333;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
  }

  .el-container{
    height:100%;
  }
  body > .el-container {
    height:100%;
    margin-bottom: 40px;
  }
  .myselelf-box{
    width:100%;
    height:200px;
    background:#fafaf2;
    color:gray;
    border-radius: 10px;
    margin-bottom: 20px;
  }
  .menu-box{
    width:100%;
    height:568px;
    background:#fafaf2;
    border-radius: 10px;
    overflow: hidden;
  }
  .el-menu {
    border:none;
  }
</style>
